<template>
  <div class="detail" ref="top">
    <van-nav-bar
      :title="headerShow ? '商品详情' : ''"
      left-arrow
      :fixed="true"
      :border="false"
      @click-left="$router.go(-1)"
      :style="{
        background:
          'linear-gradient(45deg,rgba(255, 255, 255, ' +
          rgba +
          '), rgba(255, 255, 255, ' +
          rgba +
          '))',
      }"
    />
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="img in detail.images" :key="img.id">
          <img :src="img.url" alt="" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
    <div class="goods-des" v-if="detail && detail.product">
      <div class="left">
        <span class="price">￥{{ detail.product.costprice }}</span>
        <span class="mktprice">￥{{ detail.product.mktprice }}</span>
      </div>
      <div class="buy-count">
        <span>{{ detail.buy_count }}</span
        >人已购买
      </div>
    </div>
    <div class="name" v-if="detail && detail.product">
      <span>{{ detail.product.name }}</span
      ><img
        @click="showShare = true"
        src="https://shqchapp.com/h5/static/image/share.png"
        alt=""
      />
    </div>
    <div class="shop" v-if="detail && detail.shop">
      <div class="shop-logo">
        <div class="left">
          <img :src="detail.shop.logo" alt="" />
          <div class="shop-sl">
            <p class="shopname">{{ detail.shop.shopname }}</p>
            <p class="like">{{ detail.shop.like }}人关注店铺</p>
          </div>
        </div>
        <div class="right">
          <van-button color="#fe6600" plain>全部宝贝</van-button>
          <van-button color="linear-gradient(to right, #ff5200, #fe6600)"
            >进店逛逛</van-button
          >
        </div>
      </div>

      <div class="des">
        <div class="score_describe">
          宝贝描述<span class="num">{{ detail.shop.score_describe }}</span
          >低
        </div>
        <div class="score_logistics">
          卖家服务<span class="num">{{ detail.shop.score_logistics }}</span
          >低
        </div>
        <div class="score_service">
          物流服务<span class="num">{{ detail.shop.score_service }}</span
          >低
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="goods-detail" v-if="detail.image_url">
      <van-tabs v-model:active="active">
        <van-tab title="图文详情">
          <img :src="detail.image_url" alt="" style="width: 100%" />
        </van-tab>
        <van-tab title="商品参数"
          ><div v-if="false">商品参数</div>
          <van-empty
            v-else
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description=""
        /></van-tab>
        <van-tab title="买家评论"
          ><div v-if="false">买家评论</div>
          <van-empty
            v-else
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        /></van-tab>
      </van-tabs>
    </div>
    <!-- 分享弹框 -->
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon
        icon="cart-o"
        :badge="$store.getters.totalNum.num"
        text="购物车"
        @click="$router.push('/cart')"
      />
      <van-action-bar-icon icon="star" text="已收藏" color="#00ffff" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addGoods(detail.product.id)"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script>
import { getHome } from "@/api/home.js";
import { ref } from "vue";
import { Toast } from "vant";
export default {
  name: "detail",
  setup() {
    const onClickIcon = () => Toast("点击图标");
    const onClickButton = () => Toast("点击按钮");
    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

    const showShare = ref(false);
    const active = ref(0);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    return {
      onClickIcon,
      onClickButton,
      onSelect,
      options,
      showShare,
      active,
    };
  },
  data() {
    return {
      detail: {},
      headerShow: false,
      rgba: 0,
    };
  },
  created() {
    this.getDetail(this.$route.params.id);
  },
  // beforeMount() {
  //   this.getDetail(this.$route.params.id);
  // },
  // watch: {
  //   $route(to, from) {
  //     if (this.$route.params.id) {
  //       this.getDetail(this.$route.params.id);
  //     }
  //   },
  // },
  mounted() {
    this.$refs.top.addEventListener("scroll", this.showHeader);
  },
  methods: {
    addGoods(id) {
      if (sessionStorage.getItem("islog")) {
        getHome({
          product_id: id,
          nums: 1,
          token: "29313629b21f6badabd0e076ea816aad",
          method: "cart.add",
        }).then((res) => {
          if (res.data.status) {
            Toast.success(res.data.msg);
            this.$store.dispatch("initList");
          }
        });
      } else {
        Toast("请先登录");
      }
      // this.$store.commit("addGoods", {
      //   ...this.detail,
      //   is_select: true,
      //   nums: 1,
      // });
    },
    getDetail(page) {
      getHome({
        id: page,
        token: "8d92261da8325bd3958482e3ba907b51",
        method: "goods.getdetial",
      }).then((res) => {
        this.detail = res.data.data;
        // console.log(res.data);
      });
    },
    showHeader() {
      // console.log(e.target.scrollTop);
      // 获取滚动条离顶部的距离
      let top = this.$refs.top.scrollTop;
      if (top <= 100) this.headerShow = false;
      if (top >= 100) this.headerShow = true;

      let a = top / 100;
      this.rgba = a;
      if (a == 0) this.rgba = 0;
      if (a >= 1) this.rgba = 1;
    },
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.showHeader);
  },
};
</script>

<style  scoped>
.detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 1rem;
  overflow: auto;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.van-swipe-item {
  width: 100vw;
  height: 100vw;
  position: relative;
}
.swiper .my-swipe img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.detail .goods-des,
.name,
.shop > div,
.shop .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop .left img {
  width: 1.04rem;
  height: 1.04rem;
}

.line {
  width: 100%;
  height: 0.3rem;
  background-color: rgba(0, 0, 0, 0.1);
}
.goods-des {
  padding: 0.2rem;
}
.goods-des .price {
  color: #ff7159 !important;
  font-size: 0.38rem;
}
.goods-des .mktprice {
  color: #999;
  font-size: 0.28rem;
  text-decoration: line-through;
}
.goods-des .buy-count {
  font-size: 10px;
  color: #666;
}

.name {
  width: 100%;
  font-size: 0.26rem;
  overflow: hidden;
  padding: 0.2rem;
}
.name > span {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.name img {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.4rem;
}

.shop {
  padding: 0.26rem;
}
.shop .shopname {
  font-size: 0.28rem;
}
.shop .like {
  color: #828282;
  font-size: 0.24rem;
}
.shop .shop-sl {
  margin-left: 0.2rem;
}
.shop .shop-logo .van-button {
  height: 0.6rem;
  font-size: 0.26rem;
  padding: 0 0.1rem;
  border-radius: 0.1rem;
  margin-right: 0.1rem;
}

.shop .des {
  font-size: 0.24rem;
  color: #828282;
  /* line-height: 0.3rem; */
  margin-top: 0.2rem;
}
.shop .des .num {
  color: #fe6600;
}
</style>